<template>
  <div class="container_page" :class="colorFFF ? 'ffffff' : ''">
    <div class="language-title shou flex_" @click.stop="changeOpenBtn">
      <div v-if="!pageType">{{ list[current] }}</div>
      <div v-else>Language</div>
      <div class="openBtn" v-if="openBtn"></div>
      <div class="closeBtn" v-else></div>
      <div
        class="language-content flex_between"
        :class="colorFFF ? 'background' : ''"
        @click.stop="stop"
        v-show="openBtn"
      >
        <div
          class="item"
          :class="[current == k ? 'changeItem' : '', colorFFF ? 'ffffff' : '',current == k&&colorFFF?'changeItem1':'']"
          :key="k"
          v-for="(item, k) in list"
          @click.prevent="changeLanguage($event, item, k)"
        >
          <a :lang="list1[k]" :href="currentPath(k)">
            {{ item }}
          </a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapGetters, mapMutations } from "vuex";
export default {
  computed: {
    ...mapGetters(["language"]),
    current() {
      return this.list1.findIndex((x) => x == this.language);
    },
    // current() {
    //   if (this.list1.findIndex((x) => x == this.path) >= 0) {
    //     return this.list1.findIndex((x) => x == this.path);
    //   }else{
    //     return 0
    //   }
    // },
    path() {
      if (this.$route.path.length < 2) {
        return "en";
      } else {
        return this.$route.path.substring(1, 3);
      }
    },
  },
  created() {
    // this.$router.push(this.language + "/");
  },
  mounted() {
    if (process.client) {
      if (!localStorage.getItem("language")) {
        localStorage.setItem("language", "en");
        this.setLanguageHandel("en");
      } else {
        this.setLanguageHandel(localStorage.getItem("language"));
      }
    }
  },
  data() {
    return {
      openBtn: false,
      list: [
        "English", // 英语
        "Bahasa Indonesia", // 印度尼西亚语
        "Tiếng Việt", // 越南语
        "Bahasa Malaysia", // 马来语
        "Basa Jawa", // 爪哇语
        "Čeština", // 捷克语
        "Español", // 西班牙语
        "Français", // 法语
        "German", // 德语
        "Italian", // 意大利语
        "Magyar", // 匈牙利语
        "Nederlands", // 荷兰语
        "Polish", // 波兰语
        "Português", // 葡萄牙语
        "Română", // 罗马尼亚语
        "Thailand", // 泰语
        "Turkish (Turkey)", // 土耳其语
        "Ελληνικά", // 希腊语
        "украї́нська мо́ва", // 乌克兰语
        "Русский", // 俄语
        "عَرَبِيّ", // 阿拉伯语
        "한국어", // 韩语
        "日本語", // 日语
      ],
      list1: [
        "en", // 英语
        "id", // 印度尼西亚语
        "vn", // 越南语
        "ms", // 马来语
        "jv", // 爪哇语
        "cs", // 捷克语
        "es", // 西班牙语
        "fr", // 法语
        "de", // 德语
        "it", // 意大利语
        "hu", // 匈牙利语
        "nl", // 荷兰语
        "pl", // 波兰语
        "pt", // 葡萄牙语
        "ro", // 罗马尼亚语
        "th", // 泰语
        "tr", // 土耳其语
        "el", // 希腊语
        "uk", // 乌克兰语
        "ru", // 俄语
        "ar", // 阿拉伯语
        "ko", // 韩语
        "ja", // 日语
      ],
    };
  },
  props: {
    pageType: {
      type: Boolean,
      required: false,
    },
    colorFFF: {
      type: Boolean,
      required: false,
    },
  },
  methods: {
    ...mapMutations(["setLanguage"]),
    setLanguageHandel(lang) {
      this.setLanguage(lang);
    },
    currentPath(k) {
      if (this.list1[k] == "en") {
        return "/";
      } else {
        return "/" + this.list1[k];
      }
    },
    changeLanguage(event, item, k) {
      event.preventDefault(); // 抑制默认的链接行为
      localStorage.setItem("language", this.list1[k]);
      this.setLanguage(this.list1[k]);
      this.openBtn = false;
      this.$nextTick(() => {
        this.$router.push(this.currentPath(k));
      });
    },
    changeOpenBtn() {
      this.openBtn = !this.openBtn;
    },
    close() {
      this.openBtn = false;
    },
    stop() {},
  },
};
</script>
<style lang="scss" scoped>
.ffffff {
  color: rgba(29, 33, 44, 1) !important;
}

.background {
  background: rgba(228, 233, 239, 1) !important;
}
.container_page {
  position: relative;
  z-index: 9999;
  margin-left: 70px;
  font-size: 14px;
  // font-family: Poppins-Regular, Poppins;
  color: #fff;
  .openBtn {
    width: 10px;
    height: 8px;
    background-image: url("~static/openPopup.webp"); /* 使用 "~" 作为前缀可以更好地解析静态资源的路径 */
    background-size: 10px 8px;
    margin-left: 10px;
    margin-top: 2px;
  }
  .closeBtn {
    width: 10px;
    height: 8px;
    background-image: url("~static/closePopup.webp"); /* 使用 "~" 作为前缀可以更好地解析静态资源的路径 */
    background-size: 10px 8px;
    margin-left: 10px;
    margin-top: 2px;
  }
  .language-title {
    position: relative;
    .language-content {
      position: absolute;
      right: -10px;
      top: 45px;
      padding: 6px 20px;
      padding-right: 0;
      padding-left: 34px;
      width: 327px;
      border-radius: 8px;
      background-color: rgba(12, 16, 36, 0.9);
      flex-wrap: wrap;
      .item {
        z-index: 9999;
        color: rgba(255, 255, 255, 0.5);
        font-size: 14px;
        width: 50%;
        margin: 12px 0;
      }
      .changeItem {
        color: #3ec6ff !important;
      }
      .changeItem1 {
        color: rgba(6, 74, 218, 1) !important;
        font-weight: 700;
      }
    }
  }
}
</style>